<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="always">
        <!-- 学科管理 -->
        <!-- layout布局 -->
        <el-row>
          <el-col :span="18">
            <el-form
              :inline="true"
              :model="form"
              class="demo-form-inline"
              @submit.native.prevent
            >
              <el-form-item label="学科名称">
                <el-input v-model="form.subname" />
              </el-form-item>
              <el-form-item>
                <el-button @click="onClear">消除</el-button>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="showDialog = true"
            >新增学科</el-button>
          </el-col>
        </el-row>
        <!-- 消息提示 -->
        <el-alert
          :title="'数据一共 ' + total + ' 条'"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom: 15px"
        />

        <!-- 列表 -->
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号" width="48" />
          <el-table-column property="subjectName" label="学科名称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column prop="addDate" label="创建日期" width="160">
            <template v-slot="scope">
              <span>{{ scope.row.addDate | formatTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
            :formatter="formatter"
          />
          <el-table-column prop="twoLevelDirectory" label="二级目录" />
          <el-table-column prop="tags" label="标签" />
          <el-table-column prop="totals" label="题目数量" />
          <el-table-column label="操作" width="230">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="onDirectorys(scope.row)"
              >学科分类</el-button>
              <el-button type="text" size="small" @click="onTags(scope.row)">学科标签</el-button>
              <el-button
                type="text"
                size="small"
                @click="onChange(scope.row.id)"
              >修改</el-button>
              <el-button
                type="text"
                size="small"
                @click="onRemove(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block" style="margin-top: 20px; text-align: right">
          <el-pagination
            background
            :hide-on-single-page="value"
            :current-page.sync="currentPage"
            :page-sizes="[5, 6, 8, 10]"
            :page-size="pagesize"
            layout=" total, prev, pager, next, sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>

      <!-- 新增/修改 学科 -->
      <el-dialog
        v-if="showDialog"
        :title="isEdit? '修改学科' : '新增学科' "
        :visible.sync="showDialog"
        width="30%"
        @close="closeDialog"
      >
        <subjects-add ref="subDialog" :parent-id="parentId" :is-edit="isEdit" @updata-list="updataListFn" @close="showDialog = false" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list as getSubListAPI, remove } from '@/api/hmmm/subjects'

// 导入时间格式化工具
import dayjs from 'dayjs'

// 导入新增学科对话框
import SubjectsAdd from '@/module-hmmm/components/subjects-add.vue'

export default {
  components: { SubjectsAdd },
  // 定义本地的过滤器
  filters: {
    formatTime(value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss') // 返回
    }
  },
  data() {
    return {
      parentId: '', // 父级ID 数据回填
      isEdit: false, // 修改-编辑操作
      showDialog: false, // 新增学科 弹框显示隐藏
      pagesize: 10, // 每页条数
      currentPage: 1, // 当前页数，支持 .sync 修饰符  ，输入前往多少页-显示页码
      value: false, // 当只有一页时，隐藏分页
      list: [], // 从接口处取回--学科列表

      form: {
        subname: '' // 学科名称
      },
      total: 1 // 数据总共多少条
    }
  },
  created() {
    this.getSubListFn()
  },
  methods: {
    // 获取列表
    async getSubListFn() {
      // 调用API
      const res = await getSubListAPI({
        subjectName: this.form.subname,
        page: this.currentPage,
        pagesize: this.pagesize
      })
      console.log(res)
      this.list = res.data.items
      this.pagesize = Number(res.data.pagesize)
      this.total = res.data.counts
      this.currentPage = Number(res.data.page)
    },

    // 新增/编辑学科--刷新列表、关闭弹框
    updataListFn() {
      this.showDialog = false
      this.getSubListFn()
    },

    // dialog关闭的回调
    closeDialog() {
      // 获取子组件实例-重置表单
      this.$refs.subDialog.resetForm()
    },

    // 清除--点击清除按钮
    onClear() {
      // 清空关键字输入框
      this.form.subname = ''
    },

    // 筛选--点击搜索按钮
    async onSubmit() {
      this.currentPage = 1
      // console.log(this.form.subname)
      // 更新学科列表- subjectName
      this.getSubListFn()
    },

    // 表格格式化--数据枚举显示
    formatter(row, column, cellValue, index) {
      // console.log(cellValue) // 0 / 1
      // 0-->否  1-->是
      const front = [
        {
          id: 0,
          value: '否'
        },
        {
          id: 1,
          value: '是'
        }
      ]
      const obj = front.find((item) => item.id === cellValue)
      return obj.value
    },

    // 操作--修改-数据回显
    onChange(id) {
      this.parentId = id
      this.showDialog = true
      this.isEdit = true
    },

    // 操作--删除
    async onRemove(id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      if (confirmRes === 'cancel') return

      await remove({ id: id })

      // 给用户提示
      this.$message.success('删除成功')
      // 重新渲染数据
      this.getSubListFn()
    },

    // 操作--学科分类
    onDirectorys(row) {
      this.$router.push(`/subjects/directorys?id=${row.id}&name=${row.subjectName}`)
    },

    // 操作--学科标签
    onTags(row) {
      this.$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)
    },

    // 分页--每页条数 改变时会触发
    async handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.getSubListFn()
    },
    // 分页--当前页  改变时会触发
    async handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getSubListFn()
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 10px;
}
</style>
